<template>
    <view class="page">
        <div class="userInfo">
            <div class="via-wrap" v-if="token">
                <image style="border-radius:50%" v-if="user_info.avatar" class="avatar" :src="user_info.avatar" mode="widthFix"></image>
            </div>
            <div class="content">
                <div class="name" v-if="token">{{ user_info.user_nickname || "未设置昵称" }}</div>
                <div class="name" @click.stop="$u.route('/pages/login/login')" v-else>点击登录</div>
                <div v-if="token">
					<div>{{user_info.grade_name}}</div>
                    <div>ID：{{user_info.id}}</div>
                    <div>加入时间：{{user_info.create_time}}</div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="amount-wrap">
                <div class="item" @click="jump('/pages/my/my_balance')">
                    <div class="num">{{ user_info.account_balance || "0" }}</div>
                    余额
                </div>
                <div class="item" @click="jump('/pages/my/my_red_balance_detail')">
                    <div class="num">{{ user_info.redpackets_balance || "0" }}</div>
                    红包
                </div>
                <div class="item">
                    <div class="num">{{ income || "0" }}</div>
                    总收入
                </div>
                <div class="item" @click="jump('portal/gold/shop_details')">
                    <div class="num">{{ gold || "0" }}</div>
                    金币
                </div>
            </div>
            <div class="cell-wrap">
                <div class="cell-item" @click="jump('/pages/order/orderList')">
                    <div class="left">
                        <image src="/static/images/cell/1.png" mode="" />
                        订单中心
                    </div>
                    <div class="right"><image src="/static/images/arrows-right.png" mode="" /></div>
                </div>
              <!-- <div class="cell-item" @click="jump('/pages/my/my_account_account')">
                    <div class="left">
                        <image src="/static/images/cell/2.png" mode="" />
                        提现账号
                    </div>
                    <div class="right"><image src="/static/images/arrows-right.png" mode="" /></div>
                </div> -->
                <div class="cell-item" @click="jump('/pages/my/my_information/my_information')">
                    <div class="left">
                        <image src="/static/images/cell/3.png" mode="" />
                        我的资料
                    </div>
                    <div class="right"><image src="/static/images/arrows-right.png" mode="" /></div>
                </div>
                <div class="cell-item" @click="jump('/pages/my/my_collection')">
                    <div class="left">
                        <image src="/static/images/cell/4.png" mode="" />
                        我的收藏
                    </div>
                    <div class="right"><image src="/static/images/arrows-right.png" mode="" /></div>
                </div>
                <div class="cell-item" @click="jump('/pages/my/my_follow')">
                    <div class="left">
                        <image src="/static/images/cell/5.png" mode="" />
                        我的关注
                    </div>
                    <div class="right"><image src="/static/images/arrows-right.png" mode="" /></div>
                </div>
               <!-- <div class="cell-item no-border" @click="jump('portal/service/service_list')">
                    <div class="left">
                        <image src="/static/images/cell/6.png" mode="" />
                        我的消息
                    </div>
                    <div class="right"><image src="/static/images/arrows-right.png" mode="" /></div>
                </div> -->
            </div>
            <div class="cell-wrap"  v-if="token">
                <!-- <div class="cell-item" @click="jump('/pages/my/my_announcement')">
                    <div class="left">
                        <image src="/static/images/cell/7.png" mode="" />
                        系统公告
                    </div>
                    <div class="right"><image src="/static/images/arrows-right.png" mode="" /></div>
                </div> -->
                <div class="cell-item" @click="jump('/pages/my/my_service')">
                    <div class="left">
                        <image src="/static/images/cell/8.png" mode="" />
                        专属客服
                    </div>
                    <div class="right"><image src="/static/images/arrows-right.png" mode="" /></div>
                </div>
                <div class="cell-item" @click="jump('/pages/my/my_about_us')">
                    <div class="left">
                        <image src="/static/images/cell/9.png" mode="" />
                        关于我们
                    </div>
                    <div class="right"><image src="/static/images/arrows-right.png" mode="" /></div>
                </div>
				<div class="cell-item no-border" @click="logout()">
				    <div class="left">
				        <image src="/static/images/cell/9.png" mode="" />
				        退出登录
				    </div>
				    <div class="right"><image src="/static/images/arrows-right.png" mode="" /></div>
				</div>
				
            </div>
        </div>
    </view>
</template>

<script>
import { mapState } from "vuex";
export default {
    computed: {
        ...mapState(["user", "token"]), // vuex获取用户数据
    },
    data() {
        return {
            menus: [
                [
                    {
                        title: "文章管理",
                        icon: "edit-pen",
                        url: "/pages/my/myArticle/myArticle",
                    },
                    {
                        title: "订单列表",
                        icon: "order",
                        url: "/pages/order/orderList",
                    },
                ],
                [
                    {
                        title: "我的收藏",
                        icon: "star",
                        url: "/pages/my/myFavorites/myFavorites",
                    },
                    {
                        title: "我的评论",
                        icon: "chat",
                        url: "/pages/my/myCommnet/myCommnet",
                    },
                    {
                        title: "收货地址",
                        icon: "map",
                        url: "/pages/my/address/address",
                    },
                ],
                [
                    {
                        title: "账号",
                        icon: "lock",
                        url: "/pages/my/bind/bind",
                    },
                    {
                        title: "设置",
                        icon: "setting",
                        url: "/pages/my/setting/setting",
                    },
                ],
            ],
            gold: 0,
            income: 0,
            user_info: {},
        };
    },
    onLoad() {
        console.log(uni.getStorageSync("token"));
        if (uni.getStorageSync("token")) {
            this.getUser();
        }
    },
    methods: {
        getUser() {
            this.$api.get({
                url: "portal/shop/my",
                success: (res) => {
                    console.log(res);
                    if (res.code == 1) {
                        this.user_info = res.data.users;
                    } else {
                        this.$toast("数据获取失败");
                    }
                },
            });
        },
        jump(url) {
            // this.$isLogin 判断是否登录，true:弹窗提醒
            if (this.$isLogin(true)) {
                this.$u.route(url);
            }
        },
        // 注销
        logout() {
            let that = this;
            uni.showModal({
                title: "提示",
                content: "确认注销登录？",
                confirmText: "确认",
                success: (res) => {
                    if (res.confirm) {
                        that.$store.commit("logout");
                    }
                },
            });
			// window.location.reload()
			uni.switchTab({
				url:'/pages/my/user/user'
			})
        },
    },
};
</script>
<style lang="scss" scoped>
.page {
    width: 100%;
    background: rgb(246, 246, 246);
    .userInfo {
        height: 280rpx;
        width: 100%;
        background: #ca0019;
        display: flex;
        align-items: center;
        padding: 30rpx;
        .content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 40rpx;
            color: #fff;
            font-size: 24rpx;
            height: 140rpx;
            .name {
                font-size: 36rpx !important;
            }
        }
        .via-wrap {
            width: 160rpx;
            height: 160rpx;
            border-radius: 50%;
            background: #fff;
            image {
                width: 100%;
                height: 100%;
            }
        }
    }
    .container {
        padding: 30rpx;
        .amount-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 24rpx;
            padding: 30rpx;
            background: #fff;
            border-radius: 30rpx;
            .item {
                text-align: center;
            }
        }
    }
    .num {
        color: #ca0019;
        font-size: 32rpx;
        margin-bottom: 20rpx;
    }
    .cell-wrap {
        margin-top: 20rpx;
        padding: 20rpx;
        background: #fff;
        border-radius: 20rpx;
        .cell-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100rpx;
            box-sizing: border-box;
            border-bottom: 1rpx solid #e8e8e8;
            padding: 10rpx;
            .left {
                display: flex;
                align-items: center;
                image {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 30rpx;
                }
            }
            .right {
                image {
                    width: 10rpx;
                    height: 20rpx;
                }
            }
        }
    }
}
.no-border {
    border: none !important;
}
</style>
